<html>
<head runat="server">
<title>File Gallery</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background-color: #eee;
}
form {
	margin: 0;
	padding: 0;
}

#Container {}
#Container td {
	vertical-align:top;
}
#Header {
	height: 30px;
	background-color: #eee;
	padding: 2px 8px;
}
#Header h1 {
	width: 200px;
	margin: 0;
	font-size: 14pt;
	float: left;
}
#Header select {
	float: left;
}
#SideBar {
	width: 250px;
	background-color: #eee; /* #196CCF;*/
	
}
#Files {
	border: 1px #ccc solid;
	overflow: auto;
	background-color: #fff;
}
#Footer {
	padding: 5px;
	clear:both;
	height: 50px;
	background-color: #eee;
}

.listItem {
	
	
}
.folder {

}
.file {

}
.title {
	width: 120px;
	overflow: hidden;
}


.showAsThumbs div.listItem {
	height: 140px;
	width: 120px;
	float: left;
	margin: 5px;
	text-align:center;	
}
.showAsThumbs .listItem .thumb {
	width: 120px;
	height: 105px;
	display:table-cell; 
	vertical-align:middle;
	border: solid 1px #ddd;
}
.showAsThumbs .listItem .info {
	height: 35px;
	width: 120px;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 2px;
}
.showAsThumbs .listItem .fileSize {
	display: inline;
}

.showAsThumbs .selected .thumb{
	border: solid 1px #196CCF;
}
.showAsThumbs .selected .text, .showAsThumbs .selected .imgSize {
	background-color: #196CCF;
	color: #fff;
}
.showAsThumbs .icon {
	display: none;
}



.showAsList div.listItem {	
	float: left;
	width: 200px;
	height: 20px;
	overflow: hidden;
	margin: 1px 1px 0 0;
	padding: 1px 1px 0 0 ;
}
.showAsList .listItem .thumb {	
	display:none;
}
.showAsList .imgSize {
	display: none;
	color: #f00;
}
.showAsList .icon {
	display: inline;
}

.showAsList .icon {
	vertical-align: middle;
}
.showAsList .icon img {
	margin-right: 3px;
}
.showAsList .selected  {
	background-color: #196CCF;
	color: #fff;
}

#Loader {
	position: absolute;
	width: 120px;
	height: 25px;
	background-color: #fff;
	border: solid 1px #ccc;	
	text-align:center;
}
#Loader img {	
	vertical-align:center;
}

#SideBar fieldset{
	width: 220px;
}
</style>
	<link rel="stylesheet" type="text/css" href="popups.css" />
	<script src="../prototype.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">

<div id="Container">
	<div id="Header">
		<h1>File Gallery</h1>
		
		<select id="ListType">
			<option value="showAsThumbs">Thumbnails</option>
			<option value="showAsList">List</option>			
		</select>
	</div> 
	<table cellpadding="0" cellspacing="0"><tr><td>
		<div id="Files" class="showAsThumbs">		
			
		</div>
	</td><td>
		<div id="SideBar" >
			
			<div id="SelectedItemText"></div>
			
			<div id="InsertImagePanel" style="display:none;">
				<fieldset>
					<legend>Preview</legend>
					<div style="overflow: auto; width: 210px; height: 130px;">
						<img id="Img_Preview" src="gallery/images/blank.gif">				
					</div>
				</fieldset>
				

				<fieldset>
					<legend>Dimensions</legend>
					<table>

						<tbody>
						<tr>
							<td valign="top">
								<input id="ImgProp_Original" name="ImgProp_DimType" checked="checked" type="radio" /><label for="ImgProp_Original">Original Size</label>
							</td>
							<td>
								<input id="ImgProp_Width" style="width: 45px;" type="text" />x<input id="ImgProp_Height" style="width: 45px;" type="text" />
							</td>
						</tr>
						<tr>
							<td valign="top">
								<input id="ImgProp_Custom" name="ImgProp_DimType" type="radio" /><label for="ImgProp_Custom">Custom Size</label>
							</td>
							<td>
								<input id="ImgProp_Custom_Width" style="width: 45px;" type="text" />x<input id="ImgProp_Custom_Height" style="width: 45px;" type="text" />
								<!--<br />
								<input id="ImgProp_LockRatio" checked="checked" type="checkbox" /><label for="ImgProp_LockRatio">Lock ratio</label>
								-->
							</td>
						</tr>
					</tbody></table>
				</fieldset>

				<fieldset><legend>Properties</legend>
					<table>
						<tbody>
						<!--
						<tr>
								<td class="f_title">Align</td>

								<td>
									<select id="img_align">
										<option value="">NotSet</option>
										<option value="top">Top</option>
										<option value="bottom">Bottom</option>
										<option value="left">Left</option>
										<option value="right">Right</option>
										<option value="center">Center</option>
										<option value="absmiddle">AbsMiddle</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="f_title">	
									Border 	
								</td>
								<td>
									<input id="img_border" style="width: 30px;" type="text" />					
								</td>
							</tr>	
							<tr>
								<td class="f_title">VSpace</td>
								<td>
									<input id="img_vspace" style="width: 30px;" type="text" /> HSpace<input id="img_hspace" style="width: 30px;" type="text" /></td>
								</td>
							</tr>
							-->
							<tr>
								<td class="f_title">Alt</td>
								<td>
									<input id="ImgProp_Alt" style="width: 150px;" type="text" />
								</td>
								</tr>
							<tr>
								<td class="f_title">Title</td>
								<td>
									<input id="ImgProp_Title" style="width: 150px;" type="text">
								</td>
							</tr>																						
					</tbody>
					</table>
				
					
				</fieldset>
			<input type="button" value="Insert Image" id="InsertImageButton" />
					
			
			</div>
			
			
		</div>
	</td></tr></table>   
	<div id="Footer">
		<iframe id="UploadFrame" src="gallery/upload.aspx" style="width: 400px; height: 50px; border: 0"></iframe>
	</div>	
</div>

<div id="Loader">
	<img src="gallery/images/spinner.gif" />
	Loading 
</div>

</form>
    
<script type="text/javascript">

var _baseFolder = 'images2';
var _currentFolder = '';
var _lastClickedNode = null;

var refresh = null;
var ftb = null;

document.observe('contentloaded',function() {
	if (window.opener)
		refresh = window.opener.Refresh;
	else
		refresh = window.parent.Refresh;
	
	ftb = refresh.Web.CurrentFreeTextBox;
	if (ftb == null) ftb = refresh.Web.FreeTextBoxList[0];

	resizeWindow();	
	getData(_baseFolder);
});
Event.observe(window, 'resize', resizeWindow);

Event.observe($('ListType'), 'change', listTypeChanged);
listTypeChanged();

function listTypeChanged() {
	var listType = $F('ListType');
	
	$('Files').className = listType;
}

function resizeWindow() {
	var fileList = $('Files');
	var sideBar = $('SideBar');
	
	
	var headerSize = $('Header').getDimensions();
	var footerSize = $('Footer').getDimensions();
	var sideBarSize = sideBar.getDimensions();	
	var docSize = document.viewport.getDimensions();
	
	
	var newWidth = (docSize.width - sideBarSize.width - 4);
	var newHeight = (docSize.height - headerSize.height - footerSize.height - 4);
	
	fileList.style.width = newWidth + 'px';	
	fileList.style.height = newHeight + 'px';
	
	sideBar.style.height = fileList.style.height;
}

function getData(currentFolder) {
	
	_currentFolder = currentFolder;

	var iframe = $('UploadFrame');
	console.log(iframe);
	
	//.document.getElementById('TargetFolder').value = _currentFolder;

	var fileArea = $('Files');
	fileArea.innerHTML = '';	
	showLoader();
	
	var url = 'gallery/getdata.ashx';
	var params = 'baseFolder=' + _baseFolder + '&currentFolder=' + currentFolder;
	
	var ajaxCall = new Ajax.Request(
		url, 
		{
			method: 'get', 
			parameters: params,
			onComplete: handleData
		});	
}

function handleData(response) {	
	
	// data = 
	eval(response.responseText);

	var fileArea = $('Files');
	
	/*
	<div class="listItem">
		<div class="thumb">
			<img src />
		</div>
		<div class="title">
			<span class="icon"><img src="folder.gif"></span>
			file.jpg<br />(W x H)
		</div>
	</div>
	*/
	
	
	if (_baseFolder != _currentFolder) {	
		var upNode = HTML.append(fileArea, 'div', { className:'listItem' } );

		var uThumb = HTML.append(upNode, 'div', { className:'thumb' } );		
		HTML.append(uThumb, 'img', {src: 'gallery/images/folder_up.gif'});		
		HTML.append(upNode, 'div', {className:'info'}, 'Navigate Up');		
			
		Event.observe(upNode, 'click', handleItemClick);	
		Event.observe(upNode, 'dblclick', handleItemDblClick);	
	}
	
	
	
	for (var i=0; i<data.folders.length; i++) {
		var folder = data.folders[i];
		
		var text = '<span class="icon"><img src="gallery/images/icons/folder.gif" /></span><span class="text">' + folder.name + '</span>';
		var folderNode = HTML.append(fileArea, 'div', { className:'listItem' } );
		
		folderNode.folder = folder;
		
		
		var thumb = HTML.append(folderNode, 'div', { className:'thumb' } );		
		HTML.append(thumb, 'img', {src: 'gallery/images/folder_big.gif'});		
		var title = HTML.append(folderNode, 'div', {className:'info'}, text);		
		
		
			
		Event.observe(folderNode, 'click', handleItemClick);	
		Event.observe(folderNode, 'dblclick', handleItemDblClick);
		
	
	}
	
	for (var i=0; i<data.files.length; i++) {
		var file = data.files[i];
		
		var text = '<span class="icon"><img src="gallery/images/icons/' + file.icon + '" /></span><span class="text">' + file.name + '</span>';
		if (file.width > 0 && file.height > 0)
			text += '<br /><span class="imgSize">' + file.width + 'x' + file.height + '</span>';
		
		var fileNode = HTML.append(fileArea, 'div', { className:'listItem' } );
		fileNode.file = file;
		
		var thumb = HTML.append(fileNode, 'div', { className:'thumb' } );		
		HTML.append(thumb, 'img', {src: file.thumbUrl});		
		var title = HTML.append(fileNode, 'div', {className:'info'}, text);
				
		var imageUrl = file.imageUrl;	
		
		Event.observe(fileNode, 'click', handleItemClick);			
		Event.observe(fileNode, 'dblclick', handleItemDblClick);			
	}	
	
	hideLoader();
}
function addFile(file) {
	var fileArea = $('Files');

	var text = '<span class="text">' + file.name + '</span>';
	if (file.width > 0 && file.height > 0)
		text += '<br /><span class="imgSize">' + file.width + 'x' + file.height + '</span>';
	
	var fileNode = HTML.append(fileArea, 'div', { className:'listItem' } );
	fileNode.file = file;
	
	var thumb = HTML.append(fileNode, 'div', { className:'thumb' } );		
	HTML.append(thumb, 'img', {src: file.thumbUrl});		
	var title = HTML.append(fileNode, 'div', {className:'info'}, text);
			
	var imageUrl = file.imageUrl;	
	
	Event.observe(fileNode, 'click', handleItemClick);			
	Event.observe(fileNode, 'dblclick', handleItemDblClick);
}

function handleItemClick(e) {
	
	if (_lastClickedNode)
		_lastClickedNode.removeClassName('selected');	
	
	var src = Event.element(e);
	while (!Element.hasClassName(src,'listItem') && src.parentNode)
		src = src.parentNode;
		
	src.addClassName('selected');
		
	_lastClickedNode = src;
	
	showSideBarForItem(src);
}

function handleItemDblClick(e) {
	var src = Event.element(e);
	while (!Element.hasClassName(src,'listItem') && src.parentNode)
		src = src.parentNode;
	
	if (src.folder) {
		console.log('navigate to ', src.folder.path);
		getData(src.folder.path);
	} else if (src.file) {
		console.log('show info for', src.file.url);
	} else {
		// go up
		var upFolder = _currentFolder.substring(0,_currentFolder.lastIndexOf('/'));		
		getData(upFolder);
	}
	
}

function showLoader() {
	console.log('show loader');
	var loader = $('Loader');
	loader.show();
	
	centerLoader();
}

function centerLoader() {
	var loader = $('Loader');
	var loaderSize = loader.getDimensions();
	var filesSize = $('Files').getDimensions();
	
	loader.style.left = (filesSize.width/2 - loaderSize.width/2) + 'px';
	loader.style.top = (filesSize.height/2 - loaderSize.height/2) + 'px';	
}

function hideLoader() {
	var loader = $('Loader');
	loader.hide();
}

function showSideBarForItem(item) {
	var selected = $('SelectedItemText');
	var imgPanel = $('InsertImagePanel');
	
	imgPanel.style.display = 'none';

	if (item.folder) {
		
		selected.innerHTML = 'Selected Folder: ' + item.folder.path;
		
	} else if (item.file) {
		
		selected.innerHTML = 'Selected file: ' + item.file.name;
		
		if (item.file.fileType == 'image') {
			selectedImage = item.file;
			
			imgPanel.style.display = '';
			resetImageArea();
			
			$('ImgProp_Width').value = item.file.width;
			$('ImgProp_Height').value = item.file.height;
			
			updateImagePreview();
		} else {
			
			// insert link to file!
		}

	}
}

</script>


<script type="text/javascript">
// IMAGE PANEL

var selectedImage = null;
function resetImageArea() {
	$('ImgProp_Original').checked = true;
	$('ImgProp_Custom').checked = false;
	
	$('ImgProp_Custom_Width').disabled = true;
	$('ImgProp_Custom_Height').disabled = true;
	$('ImgProp_Width').disabled = true;
	$('ImgProp_Height').disabled = true;	
	
	$('ImgProp_Custom_Width').value = '';
	$('ImgProp_Custom_Height').value = '';
	$('ImgProp_Width').value = '';
	$('ImgProp_Height').value = '';
}

function updateImagePreview() {
	var img = $('Img_Preview');
	img.src = selectedImage.url;

	if ($('ImgProp_Original').checked) {
		img.width = selectedImage.width;
		img.height = selectedImage.height;
	} else {
		img.width = $F('ImgProp_Custom_Width');
		img.height = $F('ImgProp_Custom_Height');	
	}
	console.log(img);
}

function handleImageProperitiesChange(e) {
	updateImagePreview();
}

function handleImageSizeRadio(e) {
	var w = $('ImgProp_Custom_Width');
	var h = $('ImgProp_Custom_Height');

	if ($('ImgProp_Original').checked) {
		h.disabled = true;	
		w.disabled = true;	
	} else {
		h.disabled = false;	
		w.disabled = false;	
		if (w.value == '') w.value = selectedImage.width;
		if (h.value == '') h.value = selectedImage.height;
	}
	updateImagePreview();
}

function insertImage(e) {
	var h = 0; var w = 0;
	if ($('ImgProp_Original').checked) {
		w = selectedImage.width;
		h = selectedImage.height;
	} else {
		w = $('ImgProp_Custom_Width');
		h = $('ImgProp_Custom_Height');
	}
	ftb.insertImage(selectedImage.url, w, h, $('ImgProp_Alt').value, $('ImgProp_Title').value);
}

Event.observe($('ImgProp_Width'),'keyup', handleImageProperitiesChange);
Event.observe($('ImgProp_Height'),'keyup', handleImageProperitiesChange);
Event.observe($('ImgProp_Custom_Width'),'keyup', handleImageProperitiesChange);
Event.observe($('ImgProp_Custom_Height'),'keyup', handleImageProperitiesChange);
Event.observe($('ImgProp_Alt'),'keyup', handleImageProperitiesChange);


Event.observe($('ImgProp_Original'),'click', handleImageSizeRadio);
Event.observe($('ImgProp_Custom'),'click', handleImageSizeRadio);


Event.observe($('InsertImageButton'),'click', insertImage);


</script>

<script type="text/javascript">
if (!window.Refresh) Refresh = {};
if (!window.Refresh.Web) Refresh.Web = {};
Refresh.Web.HTML = {	
	create: function(type,atts,text) {
		var el = document.createElement(type);		
		this.applyAttributes(el,atts);
		
		if (text) {
			if (!text.match(/</g)) {
				this.addText(el,text);
			} else {
				el.innerHTML = text;
			}
		}
		return el;
	},
	append: function (parent,type,atts,text) {
		var el = this.create(type,atts,text);
		parent.appendChild(el);
		return el;
	},
	applyAttributes: function(el,atts) {
		if (atts) {
			for (att in atts)
				el[att] = atts[att];
		}
	},
	addText: function(el,text)  {
		var t = document.createTextNode(text);
		el.appendChild(t);	
	},
	text: function(el,text)  {
		this.clear(el);
		this.addText(el,text);	
	},
	clear: function(el)  {
		while(el.childNodes.length>0)
			el.removeChild(el.childNodes[el.childNodes.length-1]);
		return el;	
	}	
};
HTML = Refresh.Web.HTML;
</script>

</body>
</html>
